<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="filename" content="text_alignment_system.html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东盟多语言文本对齐系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            /* Day theme */
            --primary: #a78bfa;
            --primary-light: #ddd6fe;
            --primary-dark: #7c3aed;
            --text: #1e293b;
            --bg: #fdf4ff;
            --card-bg: #ffffff;
            --sidebar-bg: #f3f4f6;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --shadow: rgba(149, 157, 165, 0.2);
        }

        .dark-theme {
            /* Night theme */
            --primary: #8b5cf6;
            --primary-light: #4c1d95;
            --primary-dark: #7c3aed;
            --text: #e2e8f0;
            --bg: #1e1b4b;
            --card-bg: #0f172a;
            --sidebar-bg: #1e293b;
            --border: #334155;
            --success: #22c55e;
            --warning: #fbbf24;
            --shadow: rgba(0, 0, 0, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Header styles */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--card-bg);
            padding: 1rem 2rem;
            box-shadow: 0 4px 6px var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border);
            height: 4.5rem;
        }

        .left-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .menu-toggle {
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--text);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .logo {
            font-size: 1.8rem;
            color: var(--primary);
        }

        .logo-text {
            font-weight: 700;
            font-size: 1.4rem;
        }

        .nav-tabs {
            display: flex;
            gap: 2rem;
            margin-left: 3rem;
        }

        .nav-tab {
            padding: 0.5rem 0;
            position: relative;
            cursor: pointer;
            font-weight: 500;
            font-size: 1.05rem;
        }

        .nav-tab.active {
            color: var(--primary-dark);
        }

        .nav-tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-dark);
            border-radius: 5px;
        }

        .user-section {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .theme-toggle {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.5rem;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-light);
            color: var(--primary-dark);
        }

        .avatar {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            background-color: var(--primary-light);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .menu-dropdown {
            position: absolute;
            top: 4rem;
            right: 2rem;
            background: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px var(--shadow);
            overflow: hidden;
            z-index: 200;
            display: none;
            width: 180px;
            border: 1px solid var(--border);
        }

        .menu-item {
            padding: 0.8rem 1.2rem;
            display: block;
            color: var(--text);
            text-decoration: none;
            cursor: pointer;
        }

        .menu-item:hover {
            background-color: var(--primary-light);
        }

        /* Sidebar styles */
        .sidebar {
            position: fixed;
            left: -270px;
            top: 0;
            height: 100vh;
            width: 270px;
            background: var(--card-bg);
            border-right: 1px solid var(--border);
            z-index: 50;
            transition: left .3s;
            box-shadow: 4px 0 10px var(--shadow);
            overflow-y: auto;
            padding-top: 1rem;
        }

        .sidebar.open {
            left: 0;
        }

        .sidebar-menu {
            list-style: none;
            padding: 1rem 0;
        }

        .sidebar-item {
            padding: 0.9rem 1.5rem;
            color: var(--text);
            border-left: 3px solid transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            transition: all 0.2s ease;
        }

        .sidebar-item.active {
            background-color: var(--primary-light);
            border-left-color: var(--primary-dark);
            color: var(--primary-dark);
        }

        .sidebar-item:hover:not(.active) {
            background-color: var(--primary-light);
        }

        /* Main content area */
        .page-container {
            max-width: 1440px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .card {
            background: var(--card-bg);
            border-radius: 1rem;
            box-shadow: 0 4px 20px var(--shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid var(--border);
        }

        .card-header {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .card-header i {
            font-size: 1.8rem;
        }

        /* Alignment page styles */
        .lang-selection {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .lang-select-row {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 1rem;
            align-items: center;
        }

        .lang-bubble {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.8rem;
            border-radius: 50px;
            background-color: var(--primary-light);
            color: var(--primary-dark);
            font-weight: 500;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }

        .btn {
            padding: 0.8rem 1.2rem;
            border-radius: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            border: none;
            outline: none;
        }

        .btn-primary {
            background: var(--primary-dark);
            color: white;
        }

        .btn-outline {
            background: transparent;
            color: var(--primary-dark);
            border: 1px solid var(--primary-dark);
        }

        .btn-primary:hover {
            background: var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary-light);
        }

        .upload-area {
            border: 2px dashed var(--primary);
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            background-color: var(--primary-light);
            cursor: pointer;
            transition: all 0.3s;
            margin: 1rem 0;
        }

        .upload-area:hover {
            background-color: var(--primary);
            color: white;
        }

        .upload-area i {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-dark);
        }

        /* Result styles */
        .result-container {
            margin-top: 2rem;
        }

        .result-box {
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            overflow: hidden;
        }

        .result-toolbar {
            background-color: var(--primary-light);
            padding: 0.75rem 1rem;
            display: flex;
            justify-content: flex-end;
            border-bottom: 1px solid var(--border);
        }

        .tool-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: none;
            border: none;
            color: var(--primary-dark);
            cursor: pointer;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: background-color 0.2s;
        }

        .tool-btn:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .result-content {
            background-color: var(--card-bg);
            padding: 1.5rem;
            max-height: 320px;
            overflow-y: auto;
            font-size: 0.95rem;
        }

        /* Charts container */
        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 1.5rem 0;
        }

        .chart {
            min-height: 320px;
        }

        /* Chat interface */
        .chat-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            height: 600px;
            border: 1px solid var(--border);
            border-radius: 1rem;
            overflow: hidden;
        }

        .chat-header {
            padding: 1rem;
            background: var(--primary-light);
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 1.1rem;
        }

        .chat-history {
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
            gap: 1.5rem;
            overflow-y: auto;
        }

        .message {
            max-width: 80%;
            padding: 1rem;
            border-radius: 1rem;
        }

        .user-message {
            background-color: var(--primary);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 0;
        }

        .ai-message {
            background-color: var(--primary-light);
            align-self: flex-start;
            border-bottom-left-radius: 0;
        }

        .chat-input-area {
            display: flex;
            border-top: 1px solid var(--border);
            padding: 1rem;
            background: var(--card-bg);
            gap: 0.5rem;
        }

        .chat-input {
            flex-grow: 1;
            padding: 1rem 1.2rem;
            border-radius: 1.75rem;
            border: 1px solid var(--border);
            background: var(--bg);
            outline: none;
            color: var(--text);
        }

        .chat-send-btn {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background-color: var(--primary-dark);
            color: white;
            cursor: pointer;
            font-size: 1.3rem;
        }

        .chat-send-btn:hover {
            background-color: var(--primary);
        }

        /* Features section for system intro */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }

        .feature-card {
            background: var(--card-bg);
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 3px 15px var(--shadow);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Search interface styles */
        .search-bar {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .search-input {
            flex-grow: 1;
            padding: 1rem 1.25rem;
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
        }

        .tab {
            padding: 1rem 1.5rem;
            cursor: pointer;
            position: relative;
            font-weight: 500;
        }

        .tab.active {
            color: var(--primary-dark);
        }

        .tab.active:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-dark);
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .slider-label {
            white-space: nowrap;
        }

        .slider {
            flex-grow: 1;
            height: 6px;
            -webkit-appearance: none;
            background: linear-gradient(90deg, var(--primary) 80%, var(--border) 80%);
            border-radius: 3px;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-dark);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        }

        .slider-value {
            min-width: 30px;
            text-align: center;
        }

        .result-list {
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            overflow: hidden;
        }

        .result-item {
            display: flex;
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
        }

        .result-item:hover {
            background-color: var(--bg);
        }

        .content-container {
            flex-grow: 1;
        }

        .result-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary-dark);
        }

        .result-content {
            color: var(--text);
            font-size: 0.95rem;
        }

        .action-icon {
            display: flex;
            align-items: center;
            font-size: 1.25rem;
            color: var(--warning);
            cursor: pointer;
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 1.5rem;
            font-size: 0.9rem;
            color: var(--text);
            background: var(--card-bg);
            border-top: 1px solid var(--border);
        }

        /* Responsive styles */
        @media (max-width: 1200px) {
            .lang-selection {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .nav-tabs {
                display: none;
            }
            .page-container {
                padding: 0 1rem;
            }
            .card {
                padding: 1.5rem;
            }
            .btn-group {
                flex-direction: column;
            }
            .charts-container {
                grid-template-columns: 1fr;
            }
            .search-bar {
                flex-direction: column;
            }
            .features-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="top-bar">
        <div class="left-header">
            <div class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </div>
            <div class="logo-container">
                <svg class="logo" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24 8L12 20M12 8L24 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    <circle cx="16" cy="16" r="14.5" stroke="currentColor" stroke-width="3"/>
                </svg>
                <div class="logo-text">LinguaAlign</div>
            </div>
            <div class="nav-tabs">
                <div class="nav-tab active" data-page="home">文本对齐</div>
                <div class="nav-tab" data-page="clean">数据清洗</div>
                <div class="nav-tab" data-page="search">数据检索</div>
                <div class="nav-tab" data-page="llm">LLM模块</div>
            </div>
        </div>
        
        <div class="user-section">
            <button class="theme-toggle" id="themeToggle">
                <i class="fas fa-moon"></i>
            </button>
            <div class="avatar" id="avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="menu-dropdown" id="menuDropdown">
                <a class="menu-item" href="#"><i class="fas fa-user mr-2"></i> 个人信息</a>
                <a class="menu-item" href="#"><i class="fas fa-sign-out-alt mr-2"></i> 退出登录</a>
            </div>
        </div>
    </div>
    
    <div class="sidebar" id="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item" data-page="home"><i class="fas fa-star"></i> 收藏夹</li>
            <li class="sidebar-item active" data-page="history"><i class="fas fa-history"></i> 历史记录</li>
            <li class="sidebar-item" data-page="system-info"><i class="fas fa-info-circle"></i> 系统介绍</li>
        </ul>
    </div>
    
    <main class="page-container">
        <!-- 首页/文本对齐页面 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-language"></i>
                多语言文本对齐
            </div>
            
            <div class="lang-selection">
                <div class="lang-select-row">
                    <div class="lang-bubble">
                        <i class="fas fa-globe-asia"></i>
                        <span>源语言:</span>
                    </div>
                    <select class="search-input">
                        <option value="zh">中文(简体)</option>
                        <option value="th">泰语</option>
                        <option value="ms">马来语</option>
                        <option value="id">印尼语</option>
                        <option value="vi">越南语</option>
                    </select>
                </div>
                
                <div class="lang-select-row">
                    <div class="lang-bubble">
                        <i class="fas fa-flag"></i>
                        <span>目标语言:</span>
                    </div>
                    <select class="search-input">
                        <option value="en">英语</option>
                        <option value="km">柬埔寨语</option>
                        <option value="lo">老挝语</option>
                        <option value="my">缅甸语</option>
                        <option value="en">菲律宾语</option>
                    </select>
                </div>
            </div>
            
            <h4>源文件上传</h4>
            <div class="upload-area">
                <i class="fas fa-file-upload"></i>
                <h4>点击或拖放源文本文件</h4>
                <p>支持.txt、.docx、.pdf格式</p>
            </div>
            
            <h4>目标文件上传</h4>
            <div class="upload-area">
                <i class="fas fa-file-import"></i>
                <h4>点击或拖放目标文本文件</h4>
                <p>支持.txt、.docx、.pdf格式</p>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-primary"><i class="fas fa-play-circle"></i> 开始对齐</button>
                <button class="btn btn-outline"><i class="fas fa-redo"></i> 重置</button>
                <button class="btn btn-outline"><i class="fas fa-bookmark"></i> 保存配置</button>
            </div>
            
            <div class="result-container">
                <h4>对齐结果</h4>
                <div class="result-box">
                    <div class="result-toolbar">
                        <button class="tool-btn"><i class="fas fa-copy"></i> 全部复制</button>
                        <button class="tool-btn"><i class="fas fa-file-export"></i> 导出文件</button>
                        <button class="tool-btn"><i class="fas fa-bookmark"></i> 添加收藏</button>
                    </div>
                    <div class="result-content">
                        <p style="margin-bottom: 1rem;"><strong>[1]</strong> 这条普通句子在两种语言中都很常见。</p>
                        <p style="margin-bottom: 1rem; padding-left: 2rem;">This common sentence is frequent in both languages.</p>
                        
                        <p style="margin-bottom: 1rem;"><strong>[2]</strong> 东盟共同体正在快速发展，展现强大的经济潜力。</p>
                        <p style="margin-bottom: 1rem; padding-left: 2rem;">The ASEAN community is rapidly evolving, showcasing significant economic potential.</p>
                        
                        <p><strong>[3]</strong> 随着多语言技术的进步，跨文化交流变得越来越便捷。</p>
                        <p style="padding-left: 2rem;">With advances in multilingual technology, cross-cultural communication has become increasingly convenient.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据清洗页面 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-broom"></i>
                数据清洗
            </div>
            
            <h4>上传需要清理的数据文件</h4>
            <div class="upload-area">
                <i class="fas fa-file-upload"></i>
                <h4>点击或拖放文件</h4>
                <p>支持.txt、.csv、.json格式</p>
            </div>
            
            <h4>清洗参数设置</h4>
            <div style="padding: 1rem; border: 1px solid var(--border); border-radius: 0.75rem; margin: 1rem 0;">
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;">
                    <div>
                        <label>清理特殊字符</label>
                        <div class="btn-group" style="margin: 0.5rem 0;">
                            <button class="btn btn-outline" style="flex: 1;">开启</button>
                            <button class="btn" style="flex: 1; background: var(--primary-light);">关闭</button>
                        </div>
                    </div>
                    
                    <div>
                        <label>删除重复项</label>
                        <div class="btn-group" style="margin: 0.5rem 0;">
                            <button class="btn" style="flex: 1; background: var(--primary-light);">开启</button>
                            <button class="btn btn-outline" style="flex: 1;">关闭</button>
                        </div>
                    </div>
                    
                    <div>
                        <label>过滤停用词</label>
                        <select class="search-input" style="margin-top: 0.5rem;">
                            <option value="zh">中文停用词</option>
                            <option value="en">英文停用词</option>
                            <option value="asean">东盟常用停用词</option>
                            <option value="custom">自定义停用词</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <button class="btn btn-primary"><i class="fas fa-filter"></i> 开始清洗</button>
            
            <div style="margin-top: 2rem;">
                <h4>清洗结果统计</h4>
                <div class="charts-container">
                    <div class="chart" id="cleanChart1"></div>
                    <div class="chart" id="cleanChart2"></div>
                </div>
                
                <div style="text-align: center; margin-top: 1rem;">
                    <button class="btn btn-primary">
                        <i class="fas fa-download"></i> 下载清洗后文件
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 文本检索页面 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-search"></i>
                文本检索
            </div>
            
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="输入关键词或句子进行检索...">
                <button class="btn btn-primary"><i class="fas fa-search"></i> 搜索</button>
            </div>
            
            <div class="tabs">
                <div class="tab active">简单检索</div>
                <div class="tab">高级检索</div>
            </div>
            
            <div class="slider-container">
                <div class="slider-label">相似度阈值：</div>
                <input type="range" min="0" max="100" value="75" class="slider" id="similaritySlider">
                <div class="slider-value" id="sliderValue">75%</div>
            </div>
            
            <div class="result-list">
                <div class="result-item">
                    <div class="content-container">
                        <div class="result-title">多语言对齐技术文档</div>
                        <div class="result-content">详细介绍了东盟语言对齐的技术框架、实现原理以及在多语言处理中的应用实践。</div>
                    </div>
                    <div class="action-icon">
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                
                <div class="result-item">
                    <div class="content-container">
                        <div class="result-title">泰国旅游手册双语对照</div>
                        <div class="result-content">针对旅游场景的泰语-英语双语对照手册，涵盖了常用表达、旅游礼仪等信息。</div>
                    </div>
                    <div class="action-icon">
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                
                <div class="result-item">
                    <div class="content-container">
                        <div class="result-title">东盟法律文件库</div>
                        <div class="result-content">包含东盟成员国法律文档的多语言版本，支持汉语、英语、泰语等多语种检索。</div>
                    </div>
                    <div class="action-icon">
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- LLM大模型页面 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-robot"></i>
                LLM 智能助手
            </div>
            
            <div class="chat-container">
                <div class="chat-header">
                    多语言翻译与分析助手
                </div>
                
                <div class="chat-history">
                    <div class="message user-message">
                        请将这段中文翻译成泰语： "我们期待加强与东盟各国的交流合作"。同时分析其语法结构。
                    </div>
                    
                    <div class="message ai-message">
                        <p>泰语翻译：พวกเราหวังว่าจะสามารถเพิ่มความร่วมมือและการแลกเปลี่ยนกับประเทศในภูมิภาคอาเซียนให้แข็งแกร่งยิ่งขึ้น</p>
                        <p class="mt-2">语法分析：</p>
                        <p>1. พวกเรา (我们) - 主语</p>
                        <p>2. หวังว่า (期待) - 动词</p>
                        <p>3. จะสามารถเพิ่ม...ให้แข็งแกร่งยิ่งขึ้น (加强...让更强大) - 动词短语作宾语</p>
                        <p>4. ความร่วมมือและการแลกเปลี่ยน (交流合作) - 名词短语</p>
                        <p>5. กับประเทศในภูมิภาคอาเซียน (与东盟各国) - 介词短语，作定语</p>
                    </div>
                    
                    <div class="message user-message">
                        你还能处理越南语、印尼语等其他东盟国家的语言吗？
                    </div>
                    
                    <div class="message ai-message">
                        是的，我可以处理所有东盟国家的官方语言，包括越南语、印尼语、马来语、菲律宾语、缅甸语、柬埔寨语和老挝语。
                    </div>
                </div>
                
                <div class="chat-input-area">
                    <input type="text" class="chat-input" placeholder="询问关于多语言互译或东盟语言的问题...">
                    <button class="chat-send-btn">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 系统介绍页面 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle"></i>
                系统介绍
            </div>
            
            <div style="margin: 1.5rem 0;">
                <h2>面向东盟的多语言文本对齐系统</h2>
                <p style="margin-top: 1rem;">本系统致力于解决东盟多语言环境下的语言障碍问题，通过先进的人工智能技术提供高质量的文本对齐、数据清洗和智能翻译服务，支持东盟10国的11种官方语言双向互译。</p>
            </div>
            
            <h3>功能模块</h3>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-align-left"></i></div>
                    <h4>智能文本对齐</h4>
                    <p>采用深度神经网络实现高精度文本对齐，支持段落级和句子级对齐，对齐准确率达95%以上。</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-broom"></i></div>
                    <h4>数据清洗工具箱</h4>
                    <p>包含去噪、去重、标准化等多语言数据处理功能，提升数据的整体质量。</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-language"></i></div>
                    <h4>多语言搜索引擎</h4>
                    <p>支持跨语言语义搜索，支持11种东盟语言互查，满足跨文化信息检索需求。</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-brain"></i></div>
                    <h4>语言大模型</h4>
                    <p>集成最新大语言模型技术，提供智能问答、语言分析及专业领域翻译服务。</p>
                </div>
            </div>
            
            <h3>发展规划</h3>
            <div style="margin-top: 1rem; background: var(--bg); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border);">
                <h4>2023第二阶段</h4>
                <p>增加缅甸语、菲律宾语和东帝汶语支持</p>
                
                <h4>2024第一阶段</h4>
                <p>实现语音-文本双向转换，提升方言识别能力</p>
                
                <h4>2024第二阶段</h4>
                <p>推出领域专业翻译引擎（法律、医疗、工程等）</p>
            </div>
        </div>
    </main>
    
    <footer class="footer">
        <p>面向东盟的多语言文本对齐系统 © 2023 | 为促进东盟区域语言文化交流而设计</p>
    </footer>
    
    <script>
        // Wait until DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Theme toggle
            const themeToggle = document.getElementById('themeToggle');
            themeToggle.addEventListener('click', function() {
                document.body.classList.toggle('dark-theme');
                const icon = themeToggle.querySelector('i');
                if (document.body.classList.contains('dark-theme')) {
                    icon.classList.remove('fa-moon');
                    icon.classList.add('fa-sun');
                } else {
                    icon.classList.remove('fa-sun');
                    icon.classList.add('fa-moon');
                }
            });
            
            // Menu toggle
            const menuToggle = document.getElementById('menuToggle');
            const sidebar = document.getElementById('sidebar');
            menuToggle.addEventListener('click', function() {
                sidebar.classList.toggle('open');
            });
            
            // User menu toggle
            const avatar = document.getElementById('avatar');
            const menuDropdown = document.getElementById('menuDropdown');
            avatar.addEventListener('click', function(e) {
                e.stopPropagation();
                menuDropdown.style.display = menuDropdown.style.display === 'block' ? 'none' : 'block';
            });
            
            // Close menu when clicking outside
            document.addEventListener('click', function(e) {
                if (!avatar.contains(e.target) && !menuDropdown.contains(e.target)) {
                    menuDropdown.style.display = 'none';
                }
            });
            
            // Navigation
            const navTabs = document.querySelectorAll('.nav-tab');
            navTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    navTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // Sidebar items
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.addEventListener('click', function() {
                    sidebarItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // Slider
            const slider = document.getElementById('similaritySlider');
            const sliderValue = document.getElementById('sliderValue');
            slider.addEventListener('input', function() {
                sliderValue.textContent = this.value + '%';
            });
            
            // Initialize charts
            const cleanChart1 = echarts.init(document.getElementById('cleanChart1'));
            const cleanChart2 = echarts.init(document.getElementById('cleanChart2'));
            
            cleanChart1.setOption({
                tooltip: { trigger: 'item' },
                legend: { bottom: 5, left: 'center' },
                series: [{
                    name: '清洗统计',
                    type: 'pie',
                    radius: '70%',
                    data: [
                        { value: 3850, name: '有效数据' },
                        { value: 890, name: '清洗数据' },
                        { value: 360, name: '无效数据' }
                    ],
                    emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
                }]
            });
            
            cleanChart2.setOption({
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['特殊字符', '重复项', '停用词', '格式错误'] },
                yAxis: { type: 'value' },
                series: [{
                    data: [180, 450, 200, 60],
                    type: 'bar',
                    barWidth: '40%'
                }]
            });
            
            // Handle window resize
            window.addEventListener('resize', function() {
                cleanChart1.resize();
                cleanChart2.resize();
            });
        });
    </script>
</body>
</html>